<template>
    <a-row>
        <a-col :span="24">
            <ml-table-pro :dataSource="dataSource" :columns="columns" >
				<!-- 工具栏 -->
                <template #toolbar>
                    <a-space>
                        <a-button
                            @click="
                                () => {
                                    clickItem({});
                                    visible = true;
                                }
                            "
                        >
                            新建
                        </a-button>
                    </a-space>
                </template>
                <template #bodyCell="{ column, index, record, text }">
                    <slot
                        name="bodyCell"
                        v-bind="{
                            column,
                            index,
                            record,
                            text,
                            open: (val) => { 
                                clickItem(record);
                                visible = val;
                            }, 
							configopen: (val) => { 
                                clickItem(record);
                                configvisible = val;
                            },
                        }"
                    >
                        <template v-if="column.key == 'action'">
                            <a-space>
                                <a-space>
                                    <a @click="visible = true"> 编辑 </a> 
                                    <a @click="visible = true"> 删除 </a>
                                </a-space>
                            </a-space>
                        </template>
                    </slot>
                </template>
            </ml-table-pro>
        </a-col>
         <!-- 新增编辑 基础信息 右侧抽屉 -->
        <a-drawer v-model:visible="visible" :title="current.name || '新建'" width="800">
            <slot name="editor" :form="form" :visible="visible"></slot>

            <template #footer style="text-align: right">
                <a-space>
                    <a-button
                        type="primary"
                        @click="
                            $emit('submit', form, () => {
                                visible = false;
                            })
                        "
                        >提交</a-button
                    >
                    <a-button>取消</a-button>
                </a-space>
            </template>
        </a-drawer>
		
		<!-- 配置 -->
		<a-drawer v-model:visible="configvisible" title="配置" :bodyStyle="{ background:'#f1f1f1',padding:'10px !important' }"  width="800">
			<slot name="config_editor" :form="form" :visible="configvisible"></slot>
			
		    <template #footer style="text-align: right">  
		        <a-space>
		            <a-button
		                type="primary"
		                @click="
		                    $emit('submit', form, () => {
		                        visible = false;
		                    })
		                "
		                >提交</a-button
		            >
		            <a-button>取消</a-button>
		        </a-space>
		    </template>
		</a-drawer>
    </a-row>
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect } from "vue";

type ComponentsType = {
    name?: string;
    count?: number;
};

interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
}

export default defineComponent({
    emits: ["submit"],
    props: {
        dataSource: Array,
        columns: Array,
    },
    setup() {
        const visible = ref(false);
		const configvisible = ref(false);
        const current = ref<ComponentsType | null>({});
        const form = ref({});
        watchEffect(() => {
            form.value = Object.assign({}, current.value);
        });

        const clickItem = (row: ComponentsType) => {
            current.value = row;
        };

        return {
            visible, 
			configvisible,
            current,
            clickItem,
            form,
        };
    },
});
</script>
